<template>
<div class="main-detail">
    <detail-nav-bar class="detail-nav" @navClick="navClick"></detail-nav-bar>
    <detail-swiper :topImages="topImages" id="0"></detail-swiper>
    <detail-base-info :goods="goods"></detail-base-info>
    <detail-shop-info :shop="shop"></detail-shop-info>
    <detail-goods-info :detail-info="detailInfo" class="goods-info" id="1"></detail-goods-info>
    <detail-comment-info :comment-info="commentInfo" id="2"></detail-comment-info>
    <div class="deta-recommend" id="3">
        <p>推荐商品</p>
        <img src="~assets/img/home/recommend_bg.jpg" alt="">
        <br><br><br><br><br>
    </div>
    <detail-bottom-bar @addToCart="addToCart" @buy="Buy"></detail-bottom-bar>
    <back-top-button></back-top-button>
</div>

</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import BackTopButton from 'components/content/backTop/BackTop'
import DetailBottomBar from './childComps/DetailBottomBar'
// import Scroll from 'components/common/scroll/Scroll';

import { getDetail,Goods,Shop } from 'network/detail'

export default {
    name: 'Detail',
    data() {
        return {
            iid: null,
            topImages: [],
            goods: {},
            shop: {},
            detailInfo: {},
            commentInfo: {},
            currentIndex: 0,
            // themeTopYs: [0,200,400,600],
            domId: [0,1,2,3]
        }
    },
    components: {
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShopInfo,
        DetailGoodsInfo,
        DetailCommentInfo,
        BackTopButton,
        DetailBottomBar,
        // Scroll,
    },
    created() {
        //保存传入的iid
        this.iid = this.$route.params.iid

        //请求详细数据
        getDetail(this.iid).then(res => {
            console.log(res);
            const data = res.result
            //获取顶部轮播数据
            this.topImages = res.result.itemInfo.topImages
            // console.log(this.topImages);

            //获取商品信息
            this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

            //获取商家信息
            this.shop = new Shop(data.shopInfo)

            //获取商品详情数据
            this.detailInfo = data.detailInfo

            //获取评论信息
            if(data.rate.cRate !== 0) {
                this.commentInfo = data.rate.list[0]
            }
        })
    },
    methods: {
        navClick(data) {
            this.currentIndex = data
            // console.log(this.currentIndex)
            document.getElementById(this.currentIndex).scrollIntoView();
        },
        addToCart() {
            // console.log(456)
            //获取购物车要展示的信息
            const product = {}
            product.img = this.topImages[0]
            product.title = this.goods.title
            product.desc = this.goods.desc
            product.price = this.goods.realPrice
            product.shop = this.shop.name
            product.logoImg = this.shop.logo
            product.iid = this.iid

            //将商品添加到购物车
            this.$store.dispatch('addCart', product)
        },
        Buy() {
            const ordproduct = {}
            ordproduct.img = this.topImages[0]
            ordproduct.title = this.goods.title
            ordproduct.desc = this.goods.desc
            ordproduct.price = this.goods.realPrice
            ordproduct.shop = this.shop.name
            ordproduct.logoImg = this.shop.logo
            ordproduct.iid = this.iid
            ordproduct.count = 1
            //将商品添加到购物车
            this.$store.commit('addOrder',ordproduct)
            console.log(this.$store.state.orderList)
        }
    }
    
}
</script>

<style scoped>
    .detail-nav {
        background-color: #fff;
        /* color: #fff; */

        position: fixed;
        left: 0;
        right: 0;
        /* top: 0; */
        z-index: 9;
    }
    .main-detail {
        position: relative;
        height: 100%;
        z-index: 20;
        background-color: #fff;
    }
    .goods-info {
        position: relative;
        margin-top: 10px;
    }
    .deta-recommend {
        font-size: 25px;
        text-align: center;
        font-weight: bolder;
        color: lightblue;
    }
    .deta-recommend img {
        width: 100%;
    }
</style>